<template>
  <view class="page-image flex-d-c w h p-h64">
    <text class="flex-l m-b40 text-700-136">请选择您的身份</text>

    <view
      class="card flex m-b30 p-h64"
      :class="{ 'card-el': role === 0 }"
      @click="switchRole(0)">
      <image class="square-80" src="@/static/images/user/icon-1.png" />
      <text class="p-l44 text-700-136">求职者</text>
    </view>
    <view
      class="card flex p-h64"
      :class="{ 'card-el': role === 1 }"
      @click="switchRole(1)">
      <image class="square-80" src="@/static/images/user/icon-2.png" />
      <text class="p-l44 text-700-136">企业</text>
    </view>

    <RcButton class="w" text="下一步" @click="toNextPage" />
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  import { formatQuery } from '@/utils/utils.ts'

  import RcButton from '@/components/button.vue'

  const role = ref(0)

  const switchRole = (value : number) => {
    role.value = value
  }

  const toNextPage = () => {
    const params = { role: role.value }

    uni.navigateTo({ url: formatQuery('/pages/user/login/login', params) })
  }
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: $page-color-2;
	}
</style>

<style lang="scss" scoped>
	.card {
		width: 100%;
		height: 170rpx;
		border-radius: 10rpx;
		background-color: $bg-color-1;
		border: 2rpx solid $bg-color-1;
	}

	.card-el {
		background-color: $bg-color-3;
		border: 2rpx solid $border-color-1;
	}
</style>
